<template>


  <div style="width: 800px">
    <h1 align="center">贷款</h1>
    <el-button style="margin-top: 12px;" @click="toUcenter">返回用户中心</el-button>
    <center>
    <div v-if="active==0" style="height: 400px">
      <span>您的额度是{{user.quota}}</span><br>

      请输入借款金额:<el-input v-model="loan.moneyNum" placeholder="请输入金额"  style="width: 300px" @blur="test()"></el-input><br>
      <br>
      <br>
      请选择借款期限
      <el-select v-model="loan.monthNum" placeholder="请选择">
        <el-option
           v-for="item in options"
           :key="item.value"
           :label="item.label"
           :value="item.value">
        </el-option>
       </el-select>
      <br>

    </div>
    </center>
    <center>
    <div v-if="active==1" style="height: 400px">
      请选择贷款方式
      <el-select v-model="loan.tid" placeholder="请选择">
        <el-option
          v-for="item in loanType"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    </center>
    <div v-if="active==2" style="width: 800px;margin-left: 100px;height: 400px">
      <!--您应还金额为{{loan.repayment}}-->
      <h1>合同</h1>

       出借方:2006A第六小组;<br>
       借款方:{{user.username}}<br>
       借款类型:	{{loan.tid}}	(1等额本金2等额本息);<br>
       双方经过充分协商，特签订本合同。<br>
       自{{loan.loanDate}}，由出借方提供借款方借款计人民币{{loan.moneyNum}}元。<br>
       还款本息和共{{loan.repayment}}元<br>
       还款计划如下:<br>
       第一条 出借方应按期、按金额向借款方提供贷款，否则，应按违约数额和延期天数，付给借款方违约金，违约金数额的计算，与逾期借款罚息同。<br>
       第二条 借款利率，按银行贷款现行贷款利率。如遇调整，按调整的新利率和计息办法计算。<br>
       第三条 借款方保证按本合同所订期限归还借款本息。否则按中国人民银行延付款计算办法计算罚息。<br>
       第四条 本合同经双方签字之日起生效。<br><br>
       出借方:2006A第六小组<br><br>
       借款方:{{user.username}}<br>


    </div>
    <div v-if="active==3"  style="height: 400px">
      <h1 align="center">贷款成功</h1>
    </div>
    <br><br><br><br>
    <center>

    <div>
      <el-steps :active="active" finish-status="success" style="margin-left: 100px">
        <el-step title="步骤 1"></el-step>
        <el-step title="步骤 2"></el-step>
        <el-step title="步骤 3"></el-step>
      </el-steps>
      <el-button v-if="active<=2" style="margin-top: 12px;" @click="up">上一步</el-button>
      <el-button v-if="active<=1" style="margin-top: 12px;" @click="next">下一步</el-button>
      <el-button v-if="active==2" style="margin-top: 12px;" @click="next">同意</el-button>
      <el-button v-if="active==3" style="margin-top: 12px;" @click="toUcenter">返回用户中心</el-button>

    </div>
    </center>
  </div>

</template>

<script>
import { loan,saveLoan,findUserByUid } from "@/api/loan";
export default {
  data() {
    return {
      active: 0,
      user:{
        id:4
        //username:"杨子硕",
        //quota:15000,
        //bank_card:"69685741425236"
      },
      loan:{
        uid:2,
        moneyNum:null,
        repayment:null,
        interestRate:0.06,
        monthNum:null,
        loanDate:null
      },
      options: [{
        value: '1',
        label: '1月'
      }, {
        value: '3',
        label: '3月'
      }, {
        value: '6',
        label: '6月'
      }, {
        value: '12',
        label: '12月'
      }, {
        value: '240',
        label: '20年'
      }],
      loanType:[{
        value: '1',
        label: '等额本金'
      }, {
        value: '2',
        label: '等额本息'
      }]
    };
  },

  methods: {
    next() {

      if (this.loan.monthNum==null || this.loan.moneyNum==null){
        this.$message.error('请输入贷款信息')
      }else {
        if (this.active++ > 2) this.active = 0;
        if (this.active==2){

          loan(this.loan).then(res=>{
            console.log(res)

            if (res.code==200){
              this.loan=res.data
            }else {
              this.$message.error('系统出问题了')
            }
          })
        }
        if (this.active==3){
          saveLoan(this.loan).then(res=>{
            if (res.code==200){
              this.$message.success("合同生成,提款成功")
              this.findUserByUid()
            }else {
              this.$message.error('系统出问题了')
            }
          })
        }
      }


    },
    up(){
      if (this.active-- <0) this.active = 0;
    },
    test(){
      if (this.loan.moneyNum>this.user.quota){
        this.$message.error('您的贷款金额超过额度')
      }
    },
    toUcenter(){
      this.$router.push("/ucenter")
    },
    findUserByUid(){
      findUserByUid(this.user.id).then(res=>{
        this.user=res.data
      })
    }
  },
  created() {
      this.findUserByUid()
      this.loan.uid=this.user.id
  }
}
</script>

<style>

</style>
